<template>
<div>
  <div v-show="personnelEdit" class="mod-config">
    <div class="div-s" ref="divs">
    <el-form :model="params" :label-position="labelPosition" :inline="true" label-width="70px" class="queryFormed">
        <el-row class="row-s">
          <el-col :span="6">
          <el-form-item label="姓名">
            <el-input v-model="params.name" clearable placeholder="请填写姓名"></el-input>
          </el-form-item>
      </el-col>
      <el-col class="col-center" :span="6">
      <el-form-item label="身份证号">
            <el-input v-model="params.idCard" clearable placeholder="请填写身份证号"></el-input>
      </el-form-item>
      </el-col>
      <el-col class="col-center" :span="6">
      <el-form-item label="手机号">
            <el-input v-model="params.mobile" clearable placeholder="请填写手机号"></el-input>
      </el-form-item>
      </el-col>
      <el-col class="col-right" v-if="conceal" :span="6">
      <el-form-item label="学历">
            <el-select v-model="params.academic" placeholder="请选择学历">
                <el-option
                  v-for="item in academics"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
      </el-form-item>
      </el-col>
       <el-col v-if="conceal" :span="6">
      <el-form-item label="职务">
            <el-input v-model="params.post" clearable placeholder="请填写职务"></el-input>
      </el-form-item>
      </el-col>
      <el-col v-if="conceal" class="col-center" :span="6">
      <el-form-item class="fazheng" label="入职日期">
            <el-date-picker type="date" v-model="params.entryTime" :picker-options="pickerOptionsValidityEndTimeA" placeholder="选择入职日期" style="width:100%"></el-date-picker>
      </el-form-item>
      </el-col>
      <el-col v-if="conceal" class="col-center" :span="6">
      <el-form-item class="fazheng" label="合同到期">
            <el-date-picker type="date" v-model="params.contractExpirationTime" @blur="blurContractExpirationTime" placeholder="选择到期日期" :picker-options="pickerOptionsValidityEndTime" style="width:100%"></el-date-picker>
      </el-form-item>
      </el-col>
      <el-col class="col-right" :span="6">
      <el-form-item class="item-all">
      <el-button class="buttonItem" v-if="isAuth('certificate:employeeInfo:info')" size="mini" plain @click="queryAll()">重 置</el-button>
      <el-button class="buttonItem" v-if="isAuth('certificate:employeeInfo:info')" size="mini" type="primary" @click="querySeek()">搜 索</el-button>
      <el-button style="color:#6E92E9;" v-if="unfold" @click="clicKunfold()" type="text">展开<i class="el-icon-arrow-down zhankai"></i></el-button>
      <el-button style="color:#6E92E9;" v-if="!unfold" @click="clickPackUp()" type="text">收起<i class="el-icon-arrow-up zhankai"></i></el-button>
      </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
    <div class="div-e">
    <div class="div-inquire" ref="divInquire">
        <div class="in-t">
          <div class="in-ts"></div>
          <h3>证书统计</h3>
        </div>
        <div class="div-button">
        <el-button v-if="isAuth('certificate:employeeInfo:info')" class="div-buttonItemb" size="mini" type="primary" plain icon="el-icon-upload2" @click="exportXls()">数据导出</el-button>
        <!-- <el-button class="div-buttonItema" plain v-if="isAuth('certificate:certificateInfo:delete')" size="mini" icon="iconfont iconlajixiang" @click="certificateinfoCrashHandler()">作废列表</el-button> -->
        </div>
      </div>
    <!-- 树状图 -->
    <div class="mod-tree">
      <div class="dept-s">
      <div class="dept-a">部门名称</div>
      <div class="dept-b">证书数量(本)</div>
    </div>
      <div class="big-tree">
  		<el-tree
          :data="data"
          node-key="id"
          :default-expanded-keys="[0]"
          :props="defaultProps"
          @on-expand="onExpand"
          ref="tree"
          highlight-current
          @node-click="onNodeClick"
      >
      <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="custom-outline">
            {{ data.certificateCount }}
          </span>
          <!-- <span>
           <!-- console.log(this.dataEditList) -->

              <!-- <i @click="() => onClick('addChild',data)" class="el-icon-circle-plus-outline"></i>增加分组 -->
              <!-- 根节点不需要删除和重命名 -->
              <!-- <i v-if="data.id !== 0" @click="() => onClick('del',data)" class="el-icon-delete"></i>删除分组 -->
              <!-- <i v-if="data.id !== 0" @click="() => onClick('edit',data)" class="el-icon-edit"></i>重命名分组 -->
          <!-- </span> -->
      </span>
     </el-tree>
     </div>
     <!-- 树状图 -->
    </div>
    <!-- 表单 -->
    <div class="mod-s">
    <div class="location">
    <!-- <el-form :inline="true">
      <el-form-item style="margin-top: 8px;margin-bottom: 10px;">
        <el-input class="seek-s" v-model="params.name" clearable placeholder="请输入完整姓名"></el-input>
        <el-button class="buttonItem" type="primary" @click="querySeek()">搜 索</el-button>
        <el-button type="primary" class="sousuo" size="small" icon="iconfont iconsoushuo" @click="queryHandle()">  高级搜索</el-button>
        <el-button class="buttonItem" type="primary" icon="el-icon-refresh-right" @click="queryAll()">重置</el-button>

        <el-button class="daochushuju" type="primary" size="small" icon="el-icon-upload2" @click="exportXls()">导出数据</el-button>
      </el-form-item>
    </el-form> -->
    </div>
    <el-table
      :data="dataList"
      @sort-change='sort_change'
      :max-height="tableHeight"
      v-loading="dataListLoading"
      :header-cell-style="{background:'#F5F7FA'}"

      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        prop="name"
        min-width="70"
        align="center"
        sortable='custom'
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="mobile"
        min-width="110"
        align="center"
        sortable='custom'
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="onCompanyFlag"
        align="center"
        sortable='custom'
        min-width="80"
        label="状态"
       >
       <template slot-scope="scope">
          <span v-if="scope.row.onCompanyFlag === 1">
             <span class="font_family icon-tuoyuan1" style="color:#67C23A"></span>
             在职
          </span>
          <span v-if="scope.row.onCompanyFlag === 0">
             <span class="font_family icon-tuoyuan1" style="color:#F56C6C"></span>
             离职
          </span>
          <span v-if="scope.row.onCompanyFlag === null">
            -
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="certificateCount"
        min-width="100"
        align="center"
        sortable='custom'
        label="证书数量"
        >
      </el-table-column>
      <el-table-column
        prop="friendCount"
        min-width="100"
        sortable='custom'
        align="center"
        label="非在职员工证书数量"
        >
      </el-table-column>
      <el-table-column
        min-width="90"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" style="color:#6E92E9;" size="mini" @click="addOrUpdateHandle(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      ref="pagHe"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, sizes, jumper">
    </el-pagination>
    </div>

    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <dept-add-or-update v-if="deptAddOrUpdateVisible" ref="deptAddOrUpdate" :dataEditList="dataEditList" @refreshDataList="initOrgTree"></dept-add-or-update>
    <query-model v-if="queryModelVisible" ref="queryModel" @refreshDataList="setParams"></query-model>
    <employee-details v-if="detailsVisible" ref="employeeDetails"></employee-details>
    </div>
  </div>
  <personnel-type :rowName="rowName" :rowId="rowId" v-if="!personnelEdit"></personnel-type>
  </div>
</template>

<script type="text/jsx">
  import $ from 'jquery'
  import 'vue2-org-tree/dist/style.css'
  import merge from 'lodash/merge'
  import AddOrUpdate from '../../company/em/employee-add-or-update'
  import QueryModel from '../../company/dept/query-model'
  import DeptAddOrUpdate from '../../company/dept/deptinfo-add-or-update'
  import EmployeeDetails from '../../company/em/employee-details'
  import companyVue from '../../..//websit/company.vue'
  import PersonnelType from '../certinfo/personnel-type.vue'
  import { eventBus } from '../../../../../eventBus'
  import Vue from 'vue'
  export default {
    data () {
      return {
        labelPosition:'right',
        conceal:false,
        unfold:true,
        queryModelVisible: false,
        detailsVisible: false,
        kiveList:false,
        personnelEdit:true,
        dataForm: {
          key: ''
        },
        input1:'',
        dataList: [],
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        rowName:'',
        rowId:'',
        a:'',
        b:'',
        c:'',
        dataListLoading: false,
        dataListSelections: [],
        pickerOptionsValidityEndTime: {
          disabledDate: (time) => {
            return time.getTime() < this.params.entryTime;
          }
        },
       pickerOptionsValidityEndTimeA: {},
        addOrUpdateVisible: false,
        deptAddOrUpdateVisible: false,
        data: [],
        defaultProps:{
        children: "children",
        label: "label",
        },
        heightis: 267,
        horizontal: false,
        collapsable: true,
        dataEditList:[],
        expandAll: true,
        labelClassName: "bg-orange",
        tenantId: 0,

        deptId: '',
        inOrder:'desc',
        orderBy:'certificateCount',
        tableHeight:0,
        params: {
          name: '',
          idCard: '',
          mobile: '',
          academic: '',
          jobGrade: '',
          entryTime: '',
          contractExpirationTime: '',
          status: '',
          post:''
        },
        academics: [
          {
          value: '',
          label: '全部'
        },
        {
          value: '博士',
          label: '博士'
        }, {
          value: '硕士',
          label: '硕士'
        }, {
          value: '本科',
          label: '本科'
        }, {
          value: '专科',
          label: '专科'
        }, {
          value: '高职高专',
          label: '高职高专'
        }, {
          value: '中专',
          label: '中专'
        }, {
          value: '高中',
          label: '高中'
        }, {
          value: '初中',
          label: '初中'
        }, {
          value: '小学',
          label: '小学'
        }, {
          value: '其他',
          label: '其他'
        }],
      };
    },
    components: {
      AddOrUpdate, DeptAddOrUpdate, QueryModel, EmployeeDetails, PersonnelType
    },
    created(){
      this.clickPackUp()
      this.params.status = 1
      this.getDataList()
      // 重新获取树状图的数据的
      this.initOrgTree()
      this.initDrag()
    },
    mounted() {
      // this.adjustTableHeight()
      eventBus.$on('personnel',(msg)=>{
        this.kiveList = msg
        this.clickKive()
      })
    },
    computed: {
    myHeader () {
      return {
        'token': Vue.cookie.get('token')
      }
     }
    },
    watch:{
      params(){
        this.$nextTick(() => {
          this.getDataList()
        })
      }
    },
    methods: {
      blurContractExpirationTime(){
        if(this.params.contractExpirationTime !== ''){
        this.pickerOptionsValidityEndTimeA = {
          disabledDate: (time) => {
            return time.getTime() > this.params.contractExpirationTime;
          }
        }
        }else{
          this.pickerOptionsValidityEndTimeA = {}
        }
      },
      clickKive(){
      if (this.kiveList) {
        this.personnelEdit = true
      }
      },
      adjustTableHeight(){
      this.$nextTick(() => {
            this.tableHeight = window.innerHeight - this.heightis;
            //后面的50：根据需求空出的高度，自行调整
        })
      },
      // 高度
      // divheight(){
      // // this.a = this.$refs.divs.offsetHeight
      // // this.b = this.$refs.divInquire.offsetHeight
      // // this.c = this.$refs.pagHe.offsetHeight
      // },
      clicKunfold(){
      this.conceal = true
      this.unfold = false
      this.heightis = 320
      this.adjustTableHeight()
      },
      clickPackUp(){
      this.conceal = false
      this.unfold = true
      this.heightis = 267
      this.adjustTableHeight()
      },
      sort_change(column){
      // console.log(column);
      this.orderBy = column.prop
      // console.log(this.orderBy);
      if(column.order =='ascending'){
        this.inOrder = 'asc'
      }
      if(column.order =='descending'){
        this.inOrder = 'desc'
      }
      this.getDataList()
      },
      // 搜索
      querySeek(){
      this.getDataList()
      },
      initDrag(){
        $("div[class^='org-tree-node']").mousedown(function(e) {
          var ele = $(this);
          document.onmousemove = function(e){
            addMoveContentControl(ele[0],e);
          }
        });
      },
      dateFormat(row, column, cellValue, index){
        return cellValue? cellValue.substring(0,10):''
      },
      setParams(params){
        this.params = params
      },
      updateParams(status){
        this.params.status = status
        this.getDataList()
      },
      genderFormat(row, column){
        if(row.gender === 2){
          return "女"
        } else {
          return "男"
        }
      },
      // 树状图点击
      onClick (command, node) {
        // 删除
        if (command === 'del') {
          if (node.children && node.children.length > 0) {
            this.$message.info('当前部门存在子部门，请先删除子部门')
          } else {
            this.$http({
              url: this.$http.adornUrl('/tenant/tenantDeptInfo/delete'),
              method: 'get',
              params: {'id':node.id}
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.initOrgTree()
                this.$message.success('删除成功')
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        }
        else if (command === 'add') {
          this.deptAddOrUpdateVisible = true
          this.$nextTick(() => {
            this.$refs.deptAddOrUpdate.init(this.tenantId, node.parentId, node.parentName)
          })
        }
        // 添加子部门
        else if (command === 'addChild') {
          this.$http({
          url: this.$http.adornUrl('/tenant/tenantDeptInfo/listAll'),
          method: 'get',
          params: this.$http.adornParams({
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
          console.log(151);
          console.log(data)
          this.dataEditList = data.data
          console.log(this.dataEditList)
          }
        })
          this.deptAddOrUpdateVisible = true
          this.$nextTick(() => {
            this.$refs.deptAddOrUpdate.init(this.tenantId, node.id, node.deptName, 0)
          })
        }
        // 修改
        else if (command === 'edit') {
          this.$http({
          url: this.$http.adornUrl('/tenant/tenantDeptInfo/listAll'),
          method: 'get',
          params: this.$http.adornParams({
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
          console.log(151);
          console.log(data)
          this.dataEditList = data.data
          console.log(this.dataEditList)
          }
        })
        this.deptAddOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.deptAddOrUpdate.init(this.tenantId, node.parentId, node.parentName, node.id)
        })
        }
      },
      onNodeClick(e, data) {
        // console.log(data)
        if(data.data.id === 0){
          this.deptId = ''
        } else {
          this.deptId = data.data.id
        }
        this.getDataList()
      },
      onExpand(e, data) {
        if ("expand" in data) {
          data.expand = !data.expand;
          if (!data.expand && data.children) {
            this.collapse(data.children);
          }
        } else {
          this.$set(data, "expand", true);
        }
      },
      collapse(list) {
        var _this = this;
        list.forEach(function(child) {
          if (child.expand) {
            child.expand = false;
          }
          child.children && _this.collapse(child.children);
        });
      },
      expandChange() {
        this.toggleExpand(this.data, this.expandAll);
      },
      toggleExpand(data, val) {
        var _this = this;
        if (Array.isArray(data)) {
          data.forEach(function(item) {
            _this.$set(item, "expand", val);
            if (item.children) {
              _this.toggleExpand(item.children, val);
            }
          });
        } else {
          this.$set(data, "expand", val);
          if (data.children) {
            _this.toggleExpand(data.children, val);
          }
        }
      },
      // 树状图的参数请求
      initOrgTree() {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantDeptInfo/tree'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log(data);
            this.data = [data.deptInfo]
          } else {
            this.data = []
          }
        })
      },
      exportXls(){
      this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/export'),
          method: 'get',
          responseType: 'blob', // 防止返回乱码
          params: this.$http.adornParams(merge(this.params, {
            'page': this.pageIndex,
            'limit': this.pageSize,
            'deptId': this.deptId,
            'inOrder':this.inOrder,
            'orderBy':this.orderBy
          })),
          showLoading: true
        }).then(({data}) => {
          if (data) {
            const link = document.createElement('a')
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let fileName = '人员证书统计.xls'
            link.setAttribute('download', fileName)
            link.download = fileName // 下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
      },
      // 获取部门中的人员数据
      getDataList () {
        this.dataListLoading = true
        this.params.entryTime = this.$dateFormat(this.params.entryTime)
        this.params.contractExpirationTime = this.$dateFormat(this.params.contractExpirationTime)

        this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/list'),
          method: 'get',
          params: this.$http.adornParams(merge(this.params,{
            'page': this.pageIndex,
            'limit': this.pageSize,
            'deptId': this.deptId,
            'inOrder':this.inOrder,
            'orderBy':this.orderBy
          }))
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      addOrUpdateHandle (row) {
        this.rowName = row.name
        this.rowId = row.id
        // console.log(row);
        // console.log(896);
      // if(row.certificateCount !==0 || row.friendCount !==0){
        this.personnelEdit = false
      // }else{
      //   this.personnelEdit = true
      // }
      },
      clickAppear(){
      this.personnelEdit = true
      },
      queryHandle(){
        this.queryModelVisible = true
        this.$nextTick(() => {
          this.$refs.queryModel.init()
        })
      },
      detailsHandle(id){
        this.detailsVisible = true
        this.$nextTick(() => {
          this.$refs.employeeDetails.init(id)
        })
      },
      // 还原的点击按钮
      // 删除的按钮
      // showNotice(){
      //   if(!this.$store.state.bizz.infoflag){
      //     this.$confirm(`<p><svg class="icon svg-icon" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#iconwanshanziliao"></use></svg></p>请完善企业信息`, '', {
      //       confirmButtonText: '去完善',
      //       cancelButtonText: '下次再说',
      //       confirmButtonClass: 'el-button--warning',
      //       dangerouslyUseHTMLString: true,
      //       showClose: false,
      //       center: true
      //     }).then(() => {
      //       this.$router.push({name:'company-info'})
      //     }).catch(() => {
      //       this.$router.push({name:'home'})
      //     });
      //   }
      // },
      queryAll(){
        this.params = {
           status:1,
           name:'',
           idCard:'',
           mobile:'',
           academic:'',
           jobGrade:'',
          //  entryTime:'',
          //  contractExpirationTime:'',
           post:''
        }
        this.getDataList()
      }
    }
  }

  var space = {
    move : {              // [移动]
      content : {           // [移动备注框]
        width  : 200,         // 默认div的宽度
        height : 200,         // 默认div的高度
        top    : 0 ,          // 默认div的距离头部距离
        right  : 0 ,          // 默认div的距离右侧距离
        bottom : 0 ,          // 默认div的距离底部距离
        left   : 0 ,          // 默认div的距离左侧距离
        moveHeight : 30 ,     // 默认头部高度
        textareaHeight : 170, // 默认textarea的高度
        min    : 100 ,        // div宽度高度不能小于min
        buttomTarget : null,  // 鼠标按下之后的target
        moveTarget : null     // 鼠标按下之后移动的target
      }
    }
  }

  /**
   * @para divEle 最大的div
   * @para e      鼠标事件
   */
  function addMoveContentSuper(divEle,e){
    // 缩小保护
    this.min = space.move.content.min;

    // 所有元素
    this.divEle    = divEle;
    this.textEle   = divEle.lastElementChild; // testArea element

    // 最大div的style
    this.divStyle  = this.divEle.style;
    this.divWidth  = this.divStyle.width;
    this.divHeight = this.divStyle.height;
    this.divTop    = this.divStyle.top;
    this.divRight  = this.divStyle.right;
    this.divBottom = this.divStyle.bottom;
    this.divLeft   = this.divStyle.left;

    // 头部移动高度
    this.hreadHeight = space.move.content.moveHeight;

    // textarray的style
    this.textStyle   = this.textEle.style;

    // 鼠标事件event
    this.e = e;
    this.x = e.movementX;
    this.y = e.movementY;
    this.moveTarget = space.move.content.moveTarget; // 正在移动的target

    // 修改属性的值
    // [这里以后就不用再if判断了,就连html里的标签都是js生成的直接用js赋值宽度就行]
    this.divWidth  = (this.divWidth   === "") ?
        space.move.content.width    : parseInt(this.divWidth.replace("px",""));

    this.divHeight = (this.divHeight  === "") ?
        space.move.content.height   : parseInt(this.divHeight.replace("px",""));

    this.divTop    = (this.divTop     === "") ?
        space.move.content.top      : parseInt(this.divTop.replace("px",""));

    this.divRight  = (this.divRight   === "") ?
        space.move.content.right    : parseInt(this.divRight.replace("px",""));

    this.divBottom = (this.divBottom  === "") ?
        space.move.content.bottom   : parseInt(this.divBottom.replace("px",""));

    this.divLeft   = (this.divLeft    === "") ?
        space.move.content.left     : parseInt(this.divLeft.replace("px",""));

  }

  /**
   * 添加移动框的 移动 && 放大 && 缩小 && 斜拉
   *
   * 元素组织最大一层 div → 移动层 → 八个小方位
   *                ↓
   *               textarea
   * @param  {[divElement]}  divEle [需要移动的div,最外层的div]
   * @param  {[EventObject]} e      [event type='move']
   * @return {[void]}
   */
  function addMoveContentControl(divEle,e){
    if(e.buttons !== 1){                               // 当鼠标没有按下则不走方法
      space.move.content.moveTarget = null;
      return;
    }else if(space.move.content.moveTarget === null){  // 当鼠标按下了,movetarget为空则赋值
      space.move.content.moveTarget = e.target;        // 这里利用了成员变量
    }
    var move = divEle;                                                 // 获取移动元素
    var direction = divEle.getElementsByClassName("s-move-content-direction");           // 获取所有拉伸的节点
    switch(space.move.content.moveTarget){
      case move         : new addMoveContentMove(divEle,e,move);                break; // 头部移动
      case direction[0] : new addMoveContentTop(divEle,e,direction[0]);         break; // 上拉伸
      case direction[1] : new addMoveContentRightTop(divEle,e,direction[1]);    break; // 右上拉伸
      case direction[2] : new addMoveContentRight(divEle,e,direction[2]);       break; // 右拉伸
      case direction[3] : new addMoveContentRightButtom(divEle,e,direction[3]); break; // 右下拉伸
      case direction[4] : new addMoveContentButtom(divEle,e,direction[4]);      break; // 下拉伸
      case direction[5] : new addMoveContentLeftButtom(divEle,e,direction[5]);  break; // 左下拉伸
      case direction[6] : new addMoveContentLeft(divEle,e,direction[6]);        break; // 左上拉伸
      case direction[7] : new addMoveContentLeftTop(divEle,e,direction[7]);     break; // 左上拉伸
      default : new addMoveContentMove(divEle,e,move); 	break;
    }
  }

  function addMoveContentMove(divEle,e,thisEle){ // 移动
    addMoveContentSuper.apply(this,arguments);
    var top  = this.divTop + this.y;
    var left = this.divLeft + this.x;
    this.divStyle.top  = top + "px";
    this.divStyle.left = left + "px";
  }

  function addMoveContentTop(divEle,e,thisEle){ // 向上拉伸
    addMoveContentSuper.apply(this,arguments);
    var top    = this.divTop;
    var height = this.divHeight + (-this.y);
    if(height < this.min)
        height = this.min;
    else
        top = this.divTop + this.y;
    this.divStyle.top    = top + "px";
    this.divStyle.height = height + "px";
    this.textStyle.height = (height - this.hreadHeight) + "px";
  }

  function addMoveContentRightTop(divEle,e,thisEle){ // 右上拉伸
    addMoveContentSuper.apply(this,arguments);
    var top    = this.divTop;
    var width  = this.divWidth + this.x;
    var height = this.divHeight + (-this.y);
    if(height < this.min)
        height = this.min;
    if(width < this.min)
        width = this.min;
    else
        top = this.divTop + this.y;
    this.divStyle.top    = top + "px";
    this.divStyle.width  = width + "px";
    this.divStyle.height = height + "px";
    this.textStyle.height = (height - this.hreadHeight) + "px";
  }

  function addMoveContentRight(divEle,e,thisEle){  // 右侧拉伸
    addMoveContentSuper.apply(this,arguments);
    var width   = this.divWidth + this.x;
    if(width < this.min)
        width = this.min;
    this.divStyle.width   = width + "px";
  }

  function addMoveContentRightButtom(divEle,e,thisEle){ // 右下拉伸
    addMoveContentSuper.apply(this,arguments);
    var width  = this.divWidth + this.x;
    var height = this.divHeight + this.y;
    if(height < this.min)
        height = this.min;
    if(width < this.min)
        width = this.min;
    this.divStyle.width  = width + "px";
    this.divStyle.height = height + "px";
    this.textStyle.height = (height - this.hreadHeight) + "px";
  }

  function addMoveContentButtom(divEle,e,thisEle){ // 向下拉伸
    addMoveContentSuper.apply(this,arguments);
    var height = this.divHeight + this.y;
    if(height < this.min)
        height = this.min;
    this.textStyle.height = (height - this.hreadHeight) + "px";
    this.divStyle.height = height + "px";
  }

  function addMoveContentLeftButtom(divEle,e,thisEle){ // 左下拉伸
    addMoveContentSuper.apply(this,arguments);
    var left   = this.divLeft;
    var width  = this.divWidth + (-this.x);
    var height = this.divHeight + this.y;
    if(height < this.min)
        height = this.min;
    if(width < this.min)
      width = this.min;
    else
      left = this.divLeft + this.x;
    this.divStyle.width  = width + "px";
    this.divStyle.height = height + "px";
    this.divStyle.left = left + "px";
    this.textStyle.height = (height - this.hreadHeight) + "px";
  }

  function addMoveContentLeft(divEle,e,thisEle){ // 向左拉伸
    addMoveContentSuper.apply(this,arguments);
    var left    = this.divLeft;
    var width   = this.divWidth + (-this.x);
    if(width < this.min)
        width = this.min;
    else
        left = this.divLeft + this.x;
    this.divStyle.left    = left + "px";
    this.divStyle.width   = width + "px";
  }

  function addMoveContentLeftTop(divEle,e,thisEle){ // 左上拉伸
    addMoveContentSuper.apply(this,arguments);
    var top    = this.divTop;
    var left   = this.divLeft;
    var width  = this.divWidth + (-this.x);
    var height = this.divHeight + (-this.y);
    if(height < this.min)
        height = this.min;
    else
        top = this.divTop + this.y;
    if(width < this.min)
        width = this.min;
    else
        left = this.divLeft + this.x;
    this.divStyle.top    = top + "px";
    this.divStyle.left   = left + "px";
    this.divStyle.width  = width + "px";
    this.divStyle.height = height + "px";
    this.textStyle.height = (height - this.hreadHeight) + "px";
  }
</script>
<style lang="scss" scoped>
/deep/.daochushuju{
  font-size: 14px !important;
  i{
    font-size: 16px !important;
  }
}
.font_family{
  font-size: 15px !important;
}
.div-e{
  width: 100%;
  background-color: #FFFFFF;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  margin-top: 15px;
    overflow: hidden;
    .mod-tree{
    margin-top: 10px;
    width: 20%;
    height: 100%;
    border-right: 1px solid #F0F2F7;
    float: left;
    overflow: hidden;
  .custom-tree-node{
    width: 300px;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    .el-icon-edit{
      float: right;
    }
    .el-icon-delete{
    float: right;
    }
    .el-icon-circle-plus-outline{
      float: right;
    }
    i{
    width: 20px;
    margin-left: 3px;
    }
   }
  /deep/.el-tree-node__content{
  height: 40px !important;
  }
  /deep/.el-tree-node:focus > .el-tree-node__content {
    background-color: #f0f7ff !important;
    color: #409EFF !important;
  }
  }
  .mod-s{
  width: 77%;
  float: right;
  overflow: hidden;
  margin-top: 10px;
  }
}
.div-inquire{
  width: 100%;
  height: 45px !important;
  background-color: #ffffff;
  // display: flex;
  // align-items: center;
}
.div-button{
  width: 30%;
  float: right;
  margin-top: 15px;
}
.div-buttonItemb{
  float: right;
  font-size: 14px;
  i{
    font-size: 16px;
  }
}
.in-t{
  width: 50%;
  float: left;
  height: 45px;
  display: flex;
  align-items: center;
  // margin-top: 15px;
  h3{
    float: left;
    font-size: 16px;
    margin: 0px !important;
    padding: 0px !important;
    color: #000000;
  }
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}
.div-s{
  width: 100%;
  background-color: #FFFFFF;
}
  .queryFormed .el-form-item{
    margin-top: 8px;
    margin-bottom: 8px;
  }
  /deep/.queryFormed .el-form-item{
    .el-select .el-input__inner{
    height: 36px!important;
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
    .el-input--suffix .el-input__inner{
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
  }
  .row-s{
  /deep/.el-col{
    display: flex;
    // justify-content: center;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
  }
}
/deep/.col-right{
.el-form-item{
margin-left: auto!important;
}
}
/deep/.el-col{
    .fazheng{
    .el-form-item__content{
    .el-input--suffix{
    .el-input__inner{
      padding-right: 0px!important;
      padding-left: 30px!important;
       }
     }
   }
 }
}
/deep/.col-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.dept-s{
  width: 100%;
  height: 50px;
  color: #303133;
  font-size: 14px;
  background-color: #F5F7FA;
  .dept-a{
    width: 60%;
    height: 50px;
    padding-left: 20px;
    float: left;
    display: flex;
    align-items: center;
    // justify-content: center;
  }
  .dept-b{
    float: right;
    width: 40%;
    height: 50px;
    padding-left: 20px;
    display: flex;
    align-items: center;
    // justify-content: center;
  }
}
  .font_family{
    font-size: 16px !important;
  }
// 分页颜色控制
 .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #409EFF !important;
    color: #fff !important;
  }
.el-tree .el-tree-node__expand-icon.expanded
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.picturess{
  font-size: 16px !important;
}
  .seek-s{
  width: 230px;
  float: left;
  }
  .sousuo{
  margin-left: 15px;
  height: 100%;
    // margin-top: 2px;
  font-size: 14px !important;
  i{
    font-size: 16px;
  }
    float: left;
  }
/deep/.buttonItem{
  // float: left;
  // margin-left: 15px;
  font-size: 14px !important;
  i{
    font-size: 16px;
  }
  }
// .el-tree-node{
//   margin-top: 10px;
// }
// /deep/.el-tree-node__content{
//   padding-left: 0px !important;
// }
// 树状图的样式

.mod-config{
  overflow: hidden;
  // margin-top: 48px;
  padding: 15px !important;
  background-color: #F5F7FA !important;
  // margin-top: 10px;
}

  .org-tree-node-label {
    white-space: nowrap;
  }
  /deep/.el-button--success.is-plain{
    height: 33px;
  }
  .bg-white {
    background-color: white;
  }
  .bg-orange {
    background-color:#fc8e2d;
    color: #ffffff;
  }
  .bg-gold {
    background-color: gold;
  }
  .bg-gray {
    background-color: gray;
  }
  .bg-lightpink {
    background-color: lightpink;
  }
  .bg-chocolate {
    background-color: chocolate;
  }
  .bg-tomato {
    background-color: tomato;
  }
  /deep/ .button-s{
    margin-left: 0px !important;
  }
  .el-button--danger {
    color: #f56c6c;
    background-color: #fff;
    border-color: #f56c6c;
  }
  .el-button--primary{
    background-color: #fc8e2d;
     border-color: #fc8e2d;
  }
  .org-tree-node-label{
    cursor: pointer;
  }
  .custom-outline{
    float: right;
    margin-right: 20px;
  }
  .el-message-box__btns {
    margin-bottom: 10px;
    margin-top: 15px;
  }
  .el-message-box__title {
    margin-top: 10px;
    margin-bottom: 15px;
  }
</style>
